<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 颜色与渐变</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        /* 演示用样式 */
        .color-demo {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
        }
        .color-box {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            color: white;
            text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .gradient-demo {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
        }
        .gradient-box {
            width: 200px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            color: white;
            text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
        }
        .opacity-demo {
            background-image: url('https://via.placeholder.com/400x200/cccccc/666666');
            padding: 20px;
            margin: 20px 0;
            border-radius: 4px;
        }
        .opacity-box {
            background-color: #0066cc;
            color: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .hex-color { background-color: #0066cc; }
        .rgb-color { background-color: rgb(0, 102, 204); }
        .rgba-color { background-color: rgba(0, 102, 204, 0.7); }
        .hsl-color { background-color: hsl(210, 100%, 40%); }
        .hsla-color { background-color: hsla(210, 100%, 40%, 0.7); }
        
        .linear-gradient-1 {
            background: linear-gradient(to right, #ff0000, #0000ff);
        }
        .linear-gradient-2 {
            background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
        }
        .linear-gradient-3 {
            background: linear-gradient(to bottom, #f5f5f5, #f5f5f5 50%, #e0e0e0 50%, #e0e0e0);
            background-size: 100% 20px;
            color: #333;
            text-shadow: none;
        }
        .radial-gradient-1 {
            background: radial-gradient(circle, #ff0000, #0000ff);
        }
        .radial-gradient-2 {
            background: radial-gradient(ellipse at top left, #ff0000, #00ff00, #0000ff);
        }
        .conic-gradient {
            background: conic-gradient(from 0deg, #ff0000, #00ff00, #0000ff, #ff0000);
        }
        .repeating-linear-gradient {
            background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, #e0e0e0 10px, #e0e0e0 20px);
            color: #333;
            text-shadow: none;
        }
        .repeating-radial-gradient {
            background: repeating-radial-gradient(circle, #f5f5f5, #f5f5f5 10px, #e0e0e0 10px, #e0e0e0 20px);
            color: #333;
            text-shadow: none;
        }
        
        .opacity-10 { opacity: 0.1; }
        .opacity-30 { opacity: 0.3; }
        .opacity-50 { opacity: 0.5; }
        .opacity-70 { opacity: 0.7; }
        .opacity-100 { opacity: 1; }
    </style>
</head>
<body>
    <nav>
        <a href="index.html">首页</a>
        <a href="css3-selectors.html">CSS选择器</a>
        <a href="css3-box-model.html">盒模型</a>
        <a href="css3-layout-flexbox.html">Flexbox布局</a>
        <a href="css3-layout-grid.html">Grid布局</a>
        <a href="css3-colors-gradients.html">颜色与渐变</a>
        <a href="css3-transforms.html">变换</a>
        <a href="css3-transitions-animations.html">过渡与动画</a>
        <a href="css3-responsive.html">响应式设计</a>
    </nav>

    <h1>CSS3 颜色与渐变</h1>
    
    <section>
        <h2>CSS3 颜色表示方法</h2>
        <div class="example">
            <p>CSS3 提供了多种表示颜色的方法，从传统的十六进制表示法到更灵活的 RGB、HSL 以及它们的透明度变体。</p>
            
            <h3>颜色表示方法</h3>
            <div class="code">
                /* 颜色名称 */
                color: red;
                color: blue;
                color: mediumseagreen;
                
                /* 十六进制表示法 */
                color: #ff0000;  /* 红色 */
                color: #00ff00;  /* 绿色 */
                color: #0000ff;  /* 蓝色 */
                color: #f00;     /* 简写形式的红色 (#ff0000) */
                
                /* RGB 表示法 */
                color: rgb(255, 0, 0);    /* 红色 */
                color: rgb(0, 255, 0);    /* 绿色 */
                color: rgb(0, 0, 255);    /* 蓝色 */
                color: rgb(128, 128, 128); /* 灰色 */
                
                /* RGBA 表示法（带透明度） */
                color: rgba(255, 0, 0, 1);    /* 不透明红色 */
                color: rgba(255, 0, 0, 0.5);  /* 半透明红色 */
                color: rgba(0, 0, 255, 0.3);  /* 30% 不透明度的蓝色 */
                
                /* HSL 表示法（色相、饱和度、亮度） */
                color: hsl(0, 100%, 50%);     /* 红色 */
                color: hsl(120, 100%, 50%);   /* 绿色 */
                color: hsl(240, 100%, 50%);   /* 蓝色 */
                color: hsl(0, 0%, 50%);       /* 灰色 */
                
                /* HSLA 表示法（带透明度） */
                color: hsla(0, 100%, 50%, 1);    /* 不透明红色 */
                color: hsla(0, 100%, 50%, 0.5);  /* 半透明红色 */
                color: hsla(240, 100%, 50%, 0.3); /* 30% 不透明度的蓝色 */
            </div>
            
            <div class="color-demo">
                <div>
                    <div class="color-box hex-color">#0066cc</div>
                    <p>十六进制</p>
                </div>
                <div>
                    <div class="color-box rgb-color">rgb(0, 102, 204)</div>
                    <p>RGB</p>
                </div>
                <div>
                    <div class="color-box rgba-color">rgba(0, 102, 204, 0.7)</div>
                    <p>RGBA</p>
                </div>
                <div>
                    <div class="color-box hsl-color">hsl(210, 100%, 40%)</div>
                    <p>HSL</p>
                </div>
                <div>
                    <div class="color-box hsla-color">hsla(210, 100%, 40%, 0.7)</div>
                    <p>HSLA</p>
                </div>
            </div>
        </div>
        
        <div class="note">
            <p><strong>HSL 颜色模型：</strong> HSL 代表色相（Hue）、饱和度（Saturation）和亮度（Lightness）。</p>
            <ul>
                <li><strong>色相（H）</strong>：色彩的基本属性，在色轮上的位置（0-360度）。0/360是红色，120是绿色，240是蓝色。</li>
                <li><strong>饱和度（S）</strong>：颜色的强度或纯度（0%-100%）。0%是灰色，100%是完全饱和的颜色。</li>
                <li><strong>亮度（L）</strong>：颜色的明暗程度（0%-100%）。0%是黑色，100%是白色，50%是"正常"亮度。</li>
            </ul>
            <p>HSL 比 RGB 更直观，更容易理解和调整颜色。</p>
        </div>
    </section>
    
    <section>
        <h2>透明度与不透明度</h2>
        <div class="example">
            <h3>opacity 属性</h3>
            <div class="code">
                /* 完全不透明（默认值） */
                opacity: 1;
                
                /* 半透明 */
                opacity: 0.5;
                
                /* 完全透明 */
                opacity: 0;
            </div>
            <p>opacity 属性影响整个元素及其所有内容的透明度。</p>
            
            <h3>RGBA 和 HSLA 中的 Alpha 通道</h3>
            <div class="code">
                /* 使用 RGBA */
                color: rgba(255, 0, 0, 0.5);          /* 半透明红色文本 */
                background-color: rgba(0, 0, 0, 0.3);  /* 30% 不透明度的黑色背景 */
                
                /* 使用 HSLA */
                color: hsla(0, 100%, 50%, 0.5);        /* 半透明红色文本 */
                background-color: hsla(0, 0%, 0%, 0.3); /* 30% 不透明度的黑色背景 */
            </div>
            <p>使用 RGBA 或 HSLA 的 Alpha 通道只影响指定的颜色属性，不影响元素的其他部分。</p>
            
            <div class="opacity-demo">
                <h3>opacity vs. rgba 对比</h3>
                <div class="opacity-box opacity-100">opacity: 1 (100% 不透明)</div>
                <div class="opacity-box opacity-70">opacity: 0.7 (70% 不透明)</div>
                <div class="opacity-box opacity-50">opacity: 0.5 (50% 不透明)</div>
                <div class="opacity-box opacity-30">opacity: 0.3 (30% 不透明)</div>
                <div class="opacity-box opacity-10">opacity: 0.1 (10% 不透明)</div>
                <div class="opacity-box" style="background-color: rgba(0, 102, 204, 1);">rgba(0, 102, 204, 1)</div>
                <div class="opacity-box" style="background-color: rgba(0, 102, 204, 0.7);">rgba(0, 102, 204, 0.7)</div>
                <div class="opacity-box" style="background-color: rgba(0, 102, 204, 0.5);">rgba(0, 102, 204, 0.5)</div>
                <div class="opacity-box" style="background-color: rgba(0, 102, 204, 0.3);">rgba(0, 102, 204, 0.3)</div>
                <div class="opacity-box" style="background-color: rgba(0, 102, 204, 0.1);">rgba(0, 102, 204, 0.1)</div>
            </div>
        </div>
        
        <div class="note">
            <p><strong>opacity vs. rgba/hsla：</strong> 使用 opacity 属性会使元素及其所有子元素变得透明，而使用 rgba 或 hsla 只会使特定的颜色属性（如背景色或文本颜色）变得透明，不影响子元素。</p>
        </div>
    </section>
    
    <section>
        <h2>CSS3 渐变</h2>
        <div class="example">
            <p>CSS3 渐变允许在两个或多个指定颜色之间显示平滑过渡。渐变可以用于任何使用图像的地方，如背景。</p>
            
            <h3>线性渐变（Linear Gradients）</h3>
            <div class="code">
                /* 基本语法 */
                background: linear-gradient(direction, color-stop1, color-stop2, ...);
                
                /* 从上到下（默认） */
                background: linear-gradient(red, blue);
                
                /* 从左到右 */
                background: linear-gradient(to right, red, blue);
                
                /* 对角线 */
                background: linear-gradient(to bottom right, red, blue);
                
                /* 使用角度 */
                background: linear-gradient(45deg, red, blue);
                
                /* 多个颜色停止点 */
                background: linear-gradient(to right, red, yellow, green, blue);
                
                /* 指定颜色停止位置 */
                background: linear-gradient(to right, red 0%, yellow 25%, green 50%, blue 100%);
                
                /* 创建条纹效果 */
                background: linear-gradient(to bottom, #f5f5f5, #f5f5f5 50%, #e0e0e0 50%, #e0e0e0);
                background-size: 100% 20px;
            </div>
            
            <div class="gradient-demo">
                <div>
                    <div class="gradient-box linear-gradient-1">左到右</div>
                    <p>linear-gradient(to right, red, blue)</p>
                </div>
                <div>
                    <div class="gradient-box linear-gradient-2">45度角，三色</div>
                    <p>linear-gradient(45deg, red, green, blue)</p>
                </div>
                <div>
                    <div class="gradient-box linear-gradient-3">条纹效果</div>
                    <p>条纹背景</p>
                </div>
            </div>
            
            <h3>径向渐变（Radial Gradients）</h3>
            <div class="code">
                /* 基本语法 */
                background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
                
                /* 默认（椭圆形，中心点） */
                background: radial-gradient(red, blue);
                
                /* 指定形状为圆形 */
                background: radial-gradient(circle, red, blue);
                
                /* 指定位置 */
                background: radial-gradient(at top left, red, blue);
                
                /* 指定形状、大小和位置 */
                background: radial-gradient(circle closest-side at 20% 30%, red, blue);
                
                /* 多个颜色停止点 */
                background: radial-gradient(circle, red, yellow, green, blue);
                
                /* 指定颜色停止位置 */
                background: radial-gradient(circle, red 0%, yellow 25%, green 50%, blue 100%);
            </div>
            
            <div class="gradient-demo">
                <div>
                    <div class="gradient-box radial-gradient-1">圆形渐变</div>
                    <p>radial-gradient(circle, red, blue)</p>
                </div>
                <div>
                    <div class="gradient-box radial-gradient-2">椭圆形，左上角</div>
                    <p>radial-gradient(ellipse at top left, red, green, blue)</p>
                </div>
            </div>
            
            <h3>锥形渐变（Conic Gradients）</h3>
            <div class="code">
                /* 基本语法 */
                background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);
                
                /* 默认（从顶部开始，中心点） */
                background: conic-gradient(red, blue);
                
                /* 指定起始角度 */
                background: conic-gradient(from 45deg, red, blue);
                
                /* 指定位置 */
                background: conic-gradient(at 25% 75%, red, blue);
                
                /* 多个颜色停止点 */
                background: conic-gradient(red, yellow, green, blue, red);
                
                /* 指定颜色停止位置（按角度） */
                background: conic-gradient(red 0deg, yellow 90deg, green 180deg, blue 270deg, red 360deg);
                
                /* 创建饼图效果 */
                background: conic-gradient(red 0deg, red 90deg, blue 90deg, blue 180deg, green 180deg, green 270deg, yellow 270deg, yellow 360deg);
            </div>
            
            <div class="gradient-demo">
                <div>
                    <div class="gradient-box conic-gradient">锥形渐变</div>
                    <p>conic-gradient(from 0deg, red, green, blue, red)</p>
                </div>
            </div>
            
            <h3>重复渐变</h3>
            <div class="code">
                /* 重复线性渐变 */
                background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, #e0e0e0 10px, #e0e0e0 20px);
                
                /* 重复径向渐变 */
                background: repeating-radial-gradient(circle, #f5f5f5, #f5f5f5 10px, #e0e0e0 10px, #e0e0e0 20px);
                
                /* 重复锥形渐变 */
                background: repeating-conic-gradient(from 0deg, #f5f5f5 0deg, #f5f5f5 15deg, #e0e0e0 15deg, #e0e0e0 30deg);
            </div>
            
            <div class="gradient-demo">
                <div>
                    <div class="gradient-box repeating-linear-gradient">重复线性渐变</div>
                    <p>repeating-linear-gradient(45deg, ...)</p>
                </div>
                <div>
                    <div class="gradient-box repeating-radial-gradient">重复径向渐变</div>
                    <p>repeating-radial-gradient(circle, ...)</p>
                </div>
            </div>
        </div>
        
        <div class="note">
            <p><strong>渐变兼容性：</strong> 现代浏览器都支持 CSS3 渐变，但在旧版浏览器中可能需要添加前缀（如 -webkit-、-moz-、-o-）或提供回退方案。锥形渐变（conic-gradient）是较新的特性，支持度较低。</p>
        </div>
    </section>
    
    <section>
        <h2>颜色函数与变量</h2>
        <div class="example">
            <h3>CSS 颜色函数</h3>
            <div class="code">
                /* 调整颜色亮度 */
                color: color-mix(in srgb, blue, white 20%);
                
                /* 混合两种颜色 */
                color: color-mix(in srgb, #ff0000, #0000ff);
                
                /* 使用 HSL 空间混合 */
                color: color-mix(in hsl, hsl(0 100% 50%), hsl(240 100% 50%));
            </div>
            <p>注意：color-mix() 是较新的 CSS 功能，可能需要检查浏览器兼容性。</p>
            
            <h3>CSS 变量（自定义属性）</h3>
            <div class="code">
                /* 定义颜色变量 */
                :root {
                    --primary-color: #0066cc;
                    --secondary-color: #ff9900;
                    --text-color: #333333;
                    --background-color: #f5f5f5;
                }
                
                /* 使用颜色变量 */
                body {
                    color: var(--text-color);
                    background-color: var(--background-color);
                }
                
                h1 {
                    color: var(--primary-color);
                }
                
                .button {
                    background-color: var(--secondary-color);
                }
                
                /* 提供回退值 */
                .element {
                    color: var(--accent-color, #009900);
                }
                
                /* 在局部范围修改变量 */
                .dark-theme {
                    --text-color: #ffffff;
                    --background-color: #222222;
                }
            </div>
        </div>
        
        <div class="note">
            <p><strong>CSS 变量的优势：</strong> 使用 CSS 变量可以集中管理颜色方案，使主题切换和维护变得更加简单。当需要更改颜色时，只需修改变量定义，而不必搜索和替换整个样式表中的所有颜色值。</p>
        </div>
    </section>
    
    <section>
        <h2>实际应用示例</h2>
        <div class="example">
            <h3>创建主题色方案</h3>
            <div class="code">
                :root {
                    /* 主色调 */
                    --primary-color: #0066cc;
                    --primary-light: #4d94ff;
                    --primary-dark: #004c99;
                    
                    /* 辅助色调 */
                    --secondary-color: #ff9900;
                    --secondary-light: #ffb84d;
                    --secondary-dark: #cc7a00;
                    
                    /* 中性色调 */
                    --text-color: #333333;
                    --text-light: #666666;
                    --background-color: #f5f5f5;
                    --border-color: #dddddd;
                }
                
                /* 暗色主题 */
                .dark-theme {
                    --text-color: #f5f5f5;
                    --text-light: #cccccc;
                    --background-color: #222222;
                    --border-color: #444444;
                }
            </div>
            
            <h3>创建渐变按钮</h3>
            <div class="code">
                .gradient-button {
                    display: inline-block;
                    padding: 10px 20px;
                    background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
                    color: white;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                }
                
                .gradient-button:hover {
                    background: linear-gradient(to right, var(--primary-light), var(--primary-color));
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                }
            </div>
            
            <h3>创建卡片悬停效果</h3>
            <div class="code">
                .card {
                    background-color: white;
                    border-radius: 8px;
                    overflow: hidden;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                }
                
                .card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
                }
                
                .card-header {
                    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
                    color: white;
                    padding: 15px;
                }
            </div>
            
            <h3>创建渐变文本</h3>
            <div class="code">
                .gradient-text {
                    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                    font-weight: bold;
                }
            </div>
        </div>
    </section>
    
    <section>
        <h2>颜色与渐变的最佳实践</h